<template>
  <div class="message_item" @click="messageItemClick">
    <div>
      <span class="user">@{{itemMessage.nickname}}</span>
      <span class="type">{{itemMessage.type}}了</span>
      <span class="content">"{{itemMessage.content}}"</span>
    </div>
    <div class="message">{{itemMessage.message}}</div>
    <div class="time">{{time}}</div>
  </div>
</template>

<script>
  import {routerReplace, formatTime} from "common/Utils";

  export default {
    name: "MessageItem",
    props: {
      itemMessage: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      time() {
        return this.itemMessage.time ? formatTime(this.itemMessage.time) : ''
      }
    },
    methods: {
      messageItemClick() {
        routerReplace(this.$router, '/detail/' + this.itemMessage.relatedId)
      }
    }
  }
</script>

<style scoped>
  .message_item {
    position: relative;
    width: 740px;
    height: 70px;
    margin: 10px auto 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 15px;
    border: 1px solid #eee;
  }

  .message_item:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
  }

  .message_item div:nth-child(1) {
    margin-top: 6px;
  }

  .message_item .user {
    margin-right: 8px;
    color: #002766;
    font-weight: 700;
  }

  .message_item .type {
    margin-right: 8px;
  }

  .message_item .message {
    color: #002766;
  }

  .message_item .message {
    margin: 10px 0 0 10px;
  }

  .message_item .time {
    position: absolute;
    top: 28px;
    right: 20px;
    color: #8F9395;
  }
</style>
